import React, { Component } from "react";
import { Row, Col, Checkbox, Spin, Select, message } from "antd";
import { summaryWayMap } from "containers/data-center/report-management/custom-report/custom-report.modal";
import { deepCopy, messages, removeArrayItemByKey } from "share/common";

const { Option } = Select;

class AddIndexToModalComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      summaryWayListMap: {},
    };
  }

  componentWillMount() {}

  componentDidMount() {
    const { onRef, value } = this.props;
    onRef && onRef(this);
    this.setValues(value);
  }

  setValues = (value) => {
    const { summaryWayListMap } = this.state;
    if (value && value.length !== 0) {
      value.forEach((item) => {
        item.uniqueKey = item.slaveColumnId || item.uniqueKey || item.id;
        summaryWayListMap[item.slaveColumnId || item.uniqueKey || item.id] = item.summaryWay;
      });
    }
    this.setState({ list: value });
  };

  componentWillReceiveProps(nextProps) {
    this.setValues(nextProps.value);
  }

  validate = () => {
    const { list } = this.state;
    const target = list.find((listItem) => !listItem.summaryWay);
    if (list && list.length === 0) {
      message.warn(messages("basic-10.key284") /*请至少勾选一个指标*/);
      return false;
    }
    if (target) {
      message.warn(messages("basic-10.key285", { arg1: target.slaveColumnDisplayName }) /*请选择{arg1}的汇总方式*/);
      return false;
    }
    return true;
  };

  handleAdd = (e, item) => {
    const { list, summaryWayListMap } = this.state;
    let result = deepCopy(list);
    const summaryWay = ["bigdecimal", "number"].includes(item.dataType) ? "sum" : "count";
    if (e.target.checked) {
      result.push({
        summaryWay,
        slaveColumnDisplayName: item.columnDisplayName,
        slaveColumnId: item.id,
        slaveReportId: item.reportId,
        id: item.id,
      });
      summaryWayListMap[item.id] = summaryWay;
    } else {
      summaryWayListMap[item.id] = undefined;
      result = removeArrayItemByKey(result, item, "id");
    }
    this.setState({ list: result, summaryWayListMap }, this.onChange);
  };

  handleSelectChange = (e, item) => {
    const { summaryWayListMap, list } = this.state;
    summaryWayListMap[item.id] = e;
    this.setState({ summaryWayListMap });
    const target = list.find((listItem) => listItem.uniqueKey === item.id);
    if (target) {
      target.summaryWay = e;
      this.setState({ list });
    }
  };

  onChange = () => {
    const { onChange } = this.props;
    onChange && onChange(this.state.list);
  };

  render() {
    const { loading, currentLinkField, data } = this.props;
    const { list = [], summaryWayListMap } = this.state;
    return (
      <div className={"add-index-to-modal-comp"}>
        <Spin spinning={loading}>
          <Row gutter={10}>
            <Col span={5}>
              <div>{messages("basic-10.key286") /*添加到指标*/}</div>
            </Col>
            <Col span={6}>
              <div>{messages("basic-10.key287") /*字段名称*/}</div>
            </Col>
            <Col span={10}>
              <div>{messages("basic-10.key288") /*字段汇总方式*/}</div>
            </Col>
          </Row>
          {data &&
            data.length !== 0 &&
            data.map((item) => {
              if (item.id !== currentLinkField.id) {
                return (
                  <Row gutter={10}>
                    <Col span={5}>
                      <Checkbox
                        checked={!!list.find((listItem) => listItem.uniqueKey === item.id)}
                        onChange={(e) => {
                          this.handleAdd(e, item);
                        }}
                      />
                    </Col>
                    <Col span={6}>
                      <div>{item.columnDisplayName}</div>
                    </Col>
                    <Col span={10}>
                      {!!list.find((listItem) => listItem.uniqueKey === item.id) && (
                        <Select
                          allowClear
                          onChange={(e) => {
                            this.handleSelectChange(e, item);
                          }}
                          value={summaryWayListMap[item.id]}
                          defaultValue={undefined}
                          placeholder={messages("common.select") /*请选择*/}
                        >
                          {Object.keys(summaryWayMap).map((option) => {
                            if (!(option !== "count" && !["bigdecimal", "number"].includes(item.dataType))) {
                              return <Option value={option}>{summaryWayMap[option]}</Option>;
                            }
                          })}
                        </Select>
                      )}
                    </Col>
                  </Row>
                );
              }
            })}
          {data && data.filter((item) => item.id !== currentLinkField.id).length === 0 && (
            <div>{messages("basic-10.key289") /*无可勾选指标，请增加外部数据源字段*/}</div>
          )}
        </Spin>
      </div>
    );
  }
}

AddIndexToModalComp.propTypes = {};

export default AddIndexToModalComp;
